<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p mv-text="msg"></p>
        <p mv-text="msg"></p>
        <h3 mv-text="msg"></h3>
        <p mv-text="info"></p>
    </div>
</body>
<script>
    // 记录监视DOM对象和定义DOM更新方法
    let Watcher = function(){

    }

    // 设置变量对象的DOM集合，并在于监视实例对象中
    Watcher.prototype.setDom=function(rootDom,key){
        let selStr=`[mv-text="${key}"]`;
        this[key]=rootDom.querySelectorAll(selStr);
        console.log(key,this[key]);
    }

    // 对应变量的DOM更新操作
    Watcher.prototype.notify=function(key,newValue){
        // 获取变量对应的DOM集合
        let domList=this[key];
        for(let i=0;i<domList.length;i++){
            // dom更新
            domList[i].textContent=newValue;
        }
    }

    // 统一初始化更新方法
    Watcher.prototype.update=function(data){
        for(let key in data){
            this.notify(key,data[key]);
        }
    }

    let Mvvm=function(options){
        this.init(options.el,options.data);
    }

    // 完成数据劫持操作
    Mvvm.prototype.deps=function(data){
        // 完成变量和DOM元素的依赖定义
        let watcher=new Watcher();
        this.temp=watcher; // 为没测试

        // 循环变量调用defineProperty()，并完成DOM关联
        for(let key in data){
            // 完成当前变量和DOM的对象关系记录
            watcher.setDom(this.$el,key);
            // 完成每个变量的数据劫持操作
            Object.defineProperty(this,key,{
                get(){
                    return data[key];
                },
                set(newValue){
                    data[key]=newValue;
                    // 更新当前变量对应的DOM
                    watcher.notify(key,newValue);
                }
            });
        }
        // 页面数据初始化
        watcher.update(data);
    }

    // 定义一个初始化方法
    Mvvm.prototype.init=function(el,data){
        // 实例关联的DOM容器
        this.$el=document.querySelector(el);
        // 将数据私有化为临时变量
        this._data=data;
        // 对数据进行getter/setter数据劫持操作
        this.deps(this._data);
    }

    let mv=new Mvvm({
        el:'#app',
        data:{
            msg:'hello',
            info:'world'
        }
    });
</script>
</html>